
<template>
  <div class="pagestyle">
    <div
      class="leftBox"
      :style="{ background: isDark ? 'rgba(255, 255, 255, 0.8)' : '' }"
    >
      <div class="leftBox-top fbc">
        <span class="top1">抽采工作面</span>
        <span class="top2" @click="addChoucaiBtn(1)">+</span>
      </div>
      <div class="leftBox-bottom">
        <div
          @click="treeClickFn(item, index)"
          class="bottomItem fbc"
          :class="{ treeActive: state.leftActiveIndex === index }"
          v-for="(item, index) in state.leftTreeData"
          :key="index"
        >
          <span :title="item.name">{{ substr(item.name) }}</span>
          <span>
            <span @click="editTreeFn(item)"
              ><el-icon><Edit /></el-icon
            ></span>
            <span @click="deleteTreeFn(item.id)"
              ><el-icon><Delete /></el-icon
            ></span>
          </span>
        </div>
      </div>
    </div>
    <div class="rightBox">
      <div
        class="querybox"
        style="width: 100%"
        :style="{ background: isDark ? 'rgba(255, 255, 255, 0.8)' : '' }"
      >
        <div class="querybox-top fbc">
          <div class="fbc">
            <div class="topTxt">202工作面</div>
            <div class="fbc topCenter">
              <div class="topcenter-1">
                <img src="@/assets/images/wasi/地图图标.png" alt="" />
              </div>
              <div class="topcenter-2">
                <img src="@/assets/images/wasi/文档图标.png" alt="" />
                <span>抽采设计说明书</span>
              </div>
              <div class="topcenter-3">
                <img src="@/assets/images/wasi/文档图标.png" alt="" />
                <span>安全技术措施</span>
              </div>
            </div>
          </div>
          <span
            @mouseleave="state.btnColorFlag = false"
            :class="state.btnColorFlag ? 'listInfoBtn active' : 'listInfoBtn'"
            @click="addChoucaiBtn"
            style="width: 83px"
          >
            <svg-icon
              :class="state.btnColorFlag ? 'active' : ''"
              class-name="search-icon"
              icon-class="xinzeng"
            />
            新增
          </span>
        </div>
        <div class="querybox-bottom fbc">
          <div
            class="btmItem"
            v-for="(item, index) in state.queryboxTopData"
            :key="index"
          >
            <div class="btmItem-item fbc">
              <img :src="item.imgUrl" alt="" />
              <div>
                <div>
                  <span class="num">{{ item.num }}</span>
                  <span class="unit">{{ item.unit }}</span>
                </div>
                <div class="txt">{{ item.txt }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="tableBox"
        :style="{ background: isDark ? 'rgba(255, 255, 255, 0.8)' : '' }"
      >
        <div class="tableBox-top fbc">
          <div class="tableBox-top-left fbc">
            <div class="nameInput fbc">
              <span class="nameInputTxt">钻场名称</span>
              <el-input
                v-model="state.zuanchangName"
                placeholder="请输入"
                size="small"
                clearable
              ></el-input>
            </div>
            <el-button @click="zcNamequeryFn" size="small" type="primary"
              >查询</el-button
            >
            <el-button @click="zcNameresetFn" size="small">重置</el-button>
          </div>
          <div class="tableBox-top-right">
            <span
              @mouseleave="state.btnColorFlag2 = false"
              :class="
                state.btnColorFlag2 ? 'listInfoBtn active' : 'listInfoBtn'
              "
              @click="addZuanchangBtn"
              style="width: 83px"
            >
              <svg-icon
                :class="state.btnColorFlag2 ? 'active' : ''"
                class-name="search-icon"
                icon-class="xinzeng"
              />
              新增
            </span>
          </div>
        </div>
        <div class="tableBox-bottom">
          <div class="taleBox-bottomTop">
            <div
              class="topItem"
              :class="{ topItemActive: state.topItemIndex === index }"
              @click="topclickFn(item, index)"
              v-for="(item, index) in state.taleBoxTopData"
              :key="index"
            >
              <span>{{ item.statusName }}</span>
              <span>（{{ item.count }}）</span>
            </div>
          </div>
          <div class="itemBoxContainer">
            <div class="container" v-for="(item, index) in state.containerData">
              <div class="zuanchangItem fbc">
                <div class="zuanchangItem-top">
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="item.statusName"
                    placement="top"
                  >
                    <span
                      class="rap"
                      :class="{
                        'txt1-1': item.statusId == 1,
                        'txt1-2': item.statusId == 2,
                        'txt1-3': item.statusId == 3 || item.statusId == 6,
                        'txt1-4': item.statusId == 4,
                        'txt1-5':
                          item.statusId == 5 ||
                          item.statusId == 7 ||
                          item.statusId == 9,
                        'txt1-6': item.statusId == 8,
                        'txt1-7': item.statusId == 10 || item.statusId == 11,
                      }"
                      >{{ item.statusName }}</span
                    >
                  </el-tooltip>
                  <span class="txt2">{{ item.siteNameShow }}</span>
                  <span class="txt3" :title="item.placeName">{{
                    substr(item.placeName)
                  }}</span>
                </div>
                <div class="fbc">
                  <img style="cursor: pointer;" src="@/assets/images/wasi/视频.png" alt="" />
                  <img
                   style="cursor: pointer;"
                    @click="zuanchangDetailFn(item.id)"
                    class="imgs"
                    src="@/assets/images/wasi/详情.png"
                    alt=""
                  />
                  <span
                    @click="addZuankongBtn(item)"
                    style="font-size: 24px; color: #5d646c; cursor: pointer"
                    >+</span
                  >
                  <span
                    class="imgs"
                    @click="editZuanchangFn(item)"
                    style="height: 15px;cursor: pointer;"
                    ><el-icon><Edit /></el-icon
                  ></span>
                  <span @click="deleteZuanchangFn(item.id)" style="height: 15px;cursor: pointer;"
                    ><el-icon><Delete /></el-icon
                  ></span>
                </div>
              </div>
              <div class="centerItem">
                <div v-for="(item2, index2) in item?.params" :key="index2">
                  <div :title="item2.key" class="nameTxt">
                    {{ substr(item2?.key) }}
                  </div>
                  <div style="font-size: 14px">
                    {{ item2.value.value }}{{ item2.value?.unit }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增抽采工作面弹框 -->
    <teleport to="body">
      <vxe-modal
        esc-closable
        destroy-on-close
        :lock-view="false"
        :width="660"
        :height="auto"
        v-model="state.addChoucaiModal"
        resize
        :mask="true"
        showFooter
      >
        <template #title>
          <div class="w100 h100 fsc mask_title">
            {{ state.modalChoucaiTitle }}
          </div>
        </template>
        <template #default>
          <div class="form_box">
            <el-form
              ref="formChoucaiRef"
              :model="state.formChoucaiData"
              :rules="state.formChoucaiRules"
              label-position="top"
            >
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="工作面名称" prop="name">
                    <el-input
                      v-model="state.formChoucaiData.name"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="工作面范围" prop="position">
                    <el-input
                      v-model="state.formChoucaiData.position"
                      placeholder="请GIS选择"
                    >
                      <template #suffix>
                        <el-button type="primary" link @click="handleGisSelect"
                          >GIS选择</el-button
                        >
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="抽采设计说明书" prop="designDocUrl">
                    <el-upload
                      ref="upload"
                      class="upload-demo"
                      drag
                      v-model:file-list="state.fileList"
                      action
                      multiple
                      :before-upload="beforeUpload"
                      :http-request="uploadHttpRequestAdd"
                      :on-preview="handlePictureCardPreview"
                    >
                      <el-icon class="el-icon--upload" style="color: #409eff"
                        ><upload-filled
                      /></el-icon>
                      <div class="el-upload__text" style="color: #aeb2b7">
                        点击或将文件拖拽到这里上传
                      </div>
                      <template #tip>
                        <div class="el-upload__tip">
                          上传图片支持jpg/png等，大小不超过 10M
                        </div>
                      </template>
                    </el-upload>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="安全技术措施" prop="safetyMeasureDocUrl">
                    <el-upload
                      ref="upload2"
                      class="upload-demo"
                      drag
                      v-model:file-list="state.fileList2"
                      action
                      multiple
                      :before-upload="beforeUpload2"
                      :http-request="uploadHttpRequestAdd2"
                      :on-preview="handlePictureCardPreview"
                    >
                      <el-icon class="el-icon--upload" style="color: #409eff"
                        ><upload-filled
                      /></el-icon>
                      <div class="el-upload__text" style="color: #aeb2b7">
                        点击或将文件拖拽到这里上传
                      </div>
                      <template #tip>
                        <div class="el-upload__tip">
                          上传图片支持jpg/png等，大小不超过 10M
                        </div>
                      </template>
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </template>
        <template #footer>
          <el-button @click="cancelChoucaiModal">取消</el-button>
          <el-button type="primary" @click="submitChoucaiForm">
            确定
          </el-button>
        </template>
      </vxe-modal>
    </teleport>
    <!-- 新增GIS弹框 -->
    <teleport to="body">
      <vxe-modal
        esc-closable
        destroy-on-close
        :lock-view="false"
        :width="1600"
        :height="auto"
        v-model="state.GISModal"
        resize
        :mask="true"
        showFooter
      >
        <template #title>
          <div class="w100 h100 fsc mask_title">GIS选择</div>
        </template>
        <template #default>
          <div style="height: 750px">
            <iframe
              class="w100 h100"
              id="iframe_box"
              :src="
                state.erweiGIS +
                'index?istitle=0&systemID=&colorchange=0&isLeftMenuShow=1&edit=0&filename='
              "
              frameborder="0"
            ></iframe>
          </div>
        </template>
        <template #footer>
          <el-button @click="cancelGISModal">取消</el-button>
          <el-button type="primary" @click="submitGISForm"> 确定 </el-button>
        </template>
      </vxe-modal>
    </teleport>
    <!-- 新增钻场弹框 -->
    <teleport to="body">
      <vxe-modal
        esc-closable
        destroy-on-close
        :lock-view="false"
        :width="660"
        :height="auto"
        v-model="state.addZuanchangModal"
        resize
        :mask="true"
        showFooter
      >
        <template #title>
          <div class="w100 h100 fsc mask_title">
            {{ state.modalZuanchangTitle }}
          </div>
        </template>
        <template #default>
          <div class="form_box">
            <el-form
              ref="formZuanchangRef"
              :model="state.formZuanchangData"
              :rules="state.formZuanchangRules"
              label-position="top"
            >
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="工作面" prop="workingFaceIds">
                    <el-select
                      v-model="state.formZuanchangData.workingFaceIds"
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="(item, index) in state.gongzuomianSelectData"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="地点名称" prop="placeName">
                    <el-input
                      v-model="state.formZuanchangData.placeName"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="钻场名称" prop="siteName">
                    <el-input
                      v-model="state.formZuanchangData.siteName"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="钻场编号" prop="siteCode">
                    <el-input
                      v-model="state.formZuanchangData.siteCode"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="钻场范围" prop="position">
                    <el-input
                      v-model="state.formZuanchangData.position"
                      placeholder="请GIS选择"
                    >
                      <template #suffix>
                        <el-button type="primary" link @click="handleGisSelect"
                          >GIS选择</el-button
                        >
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="钻场摄像头" prop="cameraIds">
                    <el-select
                      multiple
                      v-model="state.formZuanchangData.cameraIds"
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="(item, index) in state.camearSelectData"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </template>
        <template #footer>
          <el-button @click="cancelZuanchangModal">取消</el-button>
          <el-button type="primary" @click="submitZuanchangForm">
            确定
          </el-button>
        </template>
      </vxe-modal>
    </teleport>
    <!-- 钻场详情弹框 -->
    <teleport to="body">
      <vxe-modal
        esc-closable
        destroy-on-close
        :lock-view="false"
        :width="1200"
        :height="auto"
        v-model="state.zuanchangDetailsModal"
        resize
        :mask="true"
        showFooter
      >
        <template #title>
          <div class="w100 h100 fsc mask_title">钻场详情</div>
        </template>
        <template #default>
          <div class="form_box">
            <div class="zctp fbc">
              <div class="zctp-lt fbc">
                <div>
                  <div class="t1">工作面</div>
                  <div class="t2" :title="state.zcDetailData?.workingFaceNames">
                    {{ substr(state.zcDetailData?.workingFaceNames) }}
                  </div>
                </div>
                <div>
                  <div class="t1">钻场编号</div>
                  <div class="t2">{{ state.zcDetailData.siteCode }}</div>
                </div>
                <div>
                  <div class="t1">钻场范围</div>
                  <div class="t2">
                    {{ state.zcDetailData?.position?.join(",") }}
                  </div>
                </div>
              </div>
              <div class="zctp-ct"></div>
              <div class="zctp-rt fbc">
                <div>
                  <div class="t1">总设计孔</div>
                  <div class="t2">
                    {{ state.zcDetailData.drillDesignCount }}
                  </div>
                </div>
                <div>
                  <div class="t1">总设计进尺</div>
                  <div class="t2">
                    {{ state.zcDetailData.drillDesignFootage }}
                  </div>
                </div>
                <div>
                  <div class="t1">平均设计孔深</div>
                  <div class="t2">
                    {{ state.zcDetailData.drillAverageDesignDepth }}
                  </div>
                </div>
              </div>
            </div>
            <div class="zcct">
              <div style="font-weight: 700">钻场摄像头</div>
              <div style="width: 56%; margin-top: 10px" class="fbc">
                <span style="width: 190px" class="fbc">
                  <span>201工作面回风巷道头处：</span>
                  <img src="@/assets/images/wasi/视频-active.png" alt="" />
                </span>
                <span style="width: 190px" class="fbc">
                  <span>201工作面回风巷道头处：</span>
                  <img src="@/assets/images/wasi/视频-active.png" alt="" />
                </span>
                <span style="width: 190px" class="fbc">
                  <span>201工作面回风巷道头处：</span>
                  <img src="@/assets/images/wasi/视频-active.png" alt="" />
                </span>
              </div>
            </div>
            <div class="zcbt">
              <div class="searchs">
                <el-form :model="state.zcSearchData" class="forms">
                  <el-row :gutter="20">
                    <el-col :span="6">
                      <el-form-item label="终孔">
                        <el-select
                          v-model="state.zcSearchData.finalDrill"
                          style="width: 100%"
                          size="small"
                          placeholder="请选择"
                        >
                          <el-option label="是" :value="1"></el-option>
                          <el-option label="否" :value="0"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="施工日期">
                        <el-date-picker
                          v-model="state.zcSearchData.time"
                          type="daterange"
                          range-separator="-"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          size="small"
                          :value-format="'YYYY-MM-DD'"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label=" ">
                        <el-button
                          @click="zcDetailqueryFn"
                          size="small"
                          type="primary"
                          >查询</el-button
                        >
                        <el-button @click="zcDetailresetFn" size="small"
                          >重置</el-button
                        >
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
              <div class="liebiao">
                <div class="liebiaoTop fbc">
                  <span style="font-weight: 700">钻孔列表</span>
                  <span>
                    <el-button
                      @click="addZuankongBtn(state.zcDetailData)"
                      type="primary"
                      size="small"
                      >新增钻孔</el-button
                    >
                    <!-- <el-button type="primary" size="small">提交审核</el-button> -->
                  </span>
                </div>
                <div class="liebiaoBottom">
                  <vxe-table
                    height="340"
                    :data="state.zcxqTableData"
                    border="inner"
                  >
                    <vxe-column type="checkbox" :width="55"></vxe-column>
                    <vxe-column
                      type="seq"
                      :width="55"
                      title="序号"
                    ></vxe-column>
                    <vxe-column
                      v-for="(item, index) in state.zcxqTableheads"
                      :field="item.field"
                      :title="item.title"
                      :params="{ name: item.name }"
                      :width="item.width ? item.width : ''"
                      :key="index"
                    >
                      <!-- 是否终孔 -->
                      <template
                        #default="{ row }"
                        v-if="item.field === 'finalDrill'"
                      >
                        <div>
                          <span>{{
                            row[item.field] === true ? "是" : "否"
                          }}</span>
                        </div>
                      </template>
                      <!-- 异常次数 -->
                      <template
                        #default="{ row }"
                        v-if="item.field === 'errorCount'"
                      >
                        <div>
                          <span v-if="row[item.field] <= 0">{{
                            row[item.field] + "次"
                          }}</span>
                          <el-button
                            v-else
                            @click="zkyichangBtn(row)"
                            type="primary"
                            link
                          >
                            <span>{{ row[item.field] + "次" }}</span>
                          </el-button>
                        </div>
                      </template>
                    </vxe-column>
                    <vxe-column title="操作" :width="230">
                      <template #default="{ row }">
                        <el-button
                          v-if="
                            state.zcDetailData.statusId == 3 ||
                            state.zcDetailData.statusId == 4 ||
                            state.zcDetailData.statusId == 5
                          "
                          @click="shigongBtn(row.id)"
                          type="primary"
                          link
                          size="small"
                          >施工记录</el-button
                        >
                        <el-button
                          v-else
                          @click="zkjiluBtn(row.id)"
                          type="primary"
                          link
                          size="small"
                          >钻孔记录</el-button
                        >

                        <el-button type="primary" link size="small"
                          >钻孔视频</el-button
                        >
                        <el-button
                          @click="editZuankong(row)"
                          type="primary"
                          link
                          size="small"
                          >编辑</el-button
                        >
                        <el-button
                          @click="deleteZuankong(row.id)"
                          type="danger"
                          link
                          size="small"
                          >删除</el-button
                        >
                      </template>
                    </vxe-column>
                  </vxe-table>
                  <div
                    v-if="state.zcxqpageconfig.total > 0"
                    class="w100 pagevxe"
                    style="height: 35px"
                  >
                    <el-pagination
                      class="globalFontSize"
                      :class="{ pages: settingsStore.isDark }"
                      v-model:current-page="state.zcxqpageconfig.currentPage"
                      v-model:page-size="state.zcxqpageconfig.pageSize"
                      :page-sizes="[10, 20, 30, 40]"
                      background
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="state.zcxqpageconfig.total"
                      @size-change="zcxqSizePage"
                      @current-change="zcxqCurrentPage"
                      style="position: absolute; bottom: 16px; right: 16px"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template #footer>
          <el-button @click="cancelZcDetailModal">取消</el-button>
          <el-button type="primary" @click="submitZcDetailForm">
            确定
          </el-button>
        </template>
      </vxe-modal>
    </teleport>
    <!-- 新增钻孔弹框 -->
    <teleport to="body">
      <vxe-modal
        esc-closable
        destroy-on-close
        :lock-view="false"
        :width="1200"
        :height="auto"
        v-model="state.addZuankongModal"
        resize
        :mask="true"
        showFooter
      >
        <template #title>
          <div class="w100 h100 fsc mask_title">
            {{ state.modalZuankongTitle }}
          </div>
        </template>
        <template #default>
          <div class="form_box">
            <el-form
              ref="formZuankongRef"
              :model="state.formZuankongData"
              :rules="state.formZuankongRules"
              label-position="top"
            >
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item label="工作面" prop="workingFaceId">
                    <el-select
                      class="w100"
                      filterable
                      v-model="state.formZuankongData.workingFaceId"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="(item, index) in state.gongzuomianSelectData"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="钻场" prop="drillSiteId">
                    <el-select
                      class="w100"
                      filterable
                      v-model="state.formZuankongData.drillSiteId"
                      placeholder="请选择"
                      @change="stationModelChange"
                    >
                      <el-option
                        :label="item.label"
                        :value="item.value"
                        v-for="(item, index) in state.zcSelectData"
                        :key="index"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="钻孔编号" prop="drillCode">
                    <el-input
                      v-model="state.formZuankongData.drillCode"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="抽采方式" prop="drainageMethodId">
                    <el-select
                      class="w100"
                      filterable
                      v-model="state.formZuankongData.drainageMethodId"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="(item, index) in state.ccMethodData"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="钻机型号" prop="drillDeviceModelName">
                    <el-select
                      class="w100"
                      filterable
                      v-model="state.formZuankongData.drillDeviceModelName"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="(item, index) in state.zjTypeData"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="钻孔位置" prop="designDrillLocation">
                    <el-input
                      v-model.number="
                        state.formZuankongData.designDrillLocation
                      "
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="钻孔坐标" prop="position">
                    <el-input
                      v-model="state.formZuankongData.position"
                      placeholder="请GIS选择"
                    >
                      <template #suffix>
                        <el-button type="primary" link @click="handleGisSelect"
                          >GIS选择</el-button
                        >
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="开孔高度" prop="designDrillHeight">
                    <el-input
                      v-model.number="state.formZuankongData.designDrillHeight"
                      placeholder="请输入"
                    >
                      <template #suffix>
                        <span>m</span>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item
                    label="钻孔方位角"
                    prop="designDrillAzimuthAngle"
                  >
                    <el-input
                      v-model.number="
                        state.formZuankongData.designDrillAzimuthAngle
                      "
                      placeholder="请输入"
                    >
                      <template #suffix>
                        <span>。</span>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item
                    label="钻孔倾角"
                    prop="designDrillElevationAngle"
                  >
                    <el-input
                      v-model.number="
                        state.formZuankongData.designDrillElevationAngle
                      "
                      placeholder="请输入"
                    >
                      <template #suffix>
                        <span>。</span>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="钻孔间距" prop="designDrillInterval">
                    <el-input
                      v-model.number="
                        state.formZuankongData.designDrillInterval
                      "
                      placeholder="请输入"
                    >
                      <template #suffix>
                        <span>m</span>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="钻孔孔径" prop="designDrillAperture">
                    <el-input
                      v-model.number="
                        state.formZuankongData.designDrillAperture
                      "
                      placeholder="请输入"
                    >
                      <template #suffix>
                        <span>mm</span>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="钻孔深度" prop="designDrillDepth">
                    <el-input
                      v-model.number="state.formZuankongData.designDrillDepth"
                      placeholder="请输入"
                    >
                      <template #suffix>
                        <span>m</span>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="钻孔摄像头" prop="cameraId">
                    <el-select
                      class="w100"
                      filterable
                      v-model="state.formZuankongData.cameraId"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="(item, index) in state.camearSelectData"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </template>
        <template #footer>
          <el-button @click="cancelZuankongModal">取消</el-button>
          <el-button type="primary" @click="submitZuankongForm">
            确定
          </el-button>
        </template>
      </vxe-modal>
    </teleport>
    <!-- 钻孔异常弹框 -->
    <teleport to="body">
      <vxe-modal
        esc-closable
        destroy-on-close
        :lock-view="false"
        :width="1200"
        :height="auto"
        v-model="state.zkyichangModal"
        resize
        :mask="true"
        showFooter
      >
        <template #title>
          <div class="w100 h100 fsc mask_title">
            {{ state.modalZkyichangTitle }}
          </div>
        </template>
        <template #default>
          <div class="form_box">
            <div class="zctp fbc">
              <div class="zctp-lt fbc">
                <div>
                  <div class="t1">工作面</div>
                  <div class="t2">
                    {{ substr(state.zcDetailData?.workingFaceNames) }}
                  </div>
                </div>
                <div>
                  <div class="t1">钻场编号</div>
                  <div class="t2">{{ state.zcDetailData.siteCode }}</div>
                </div>
                <div>
                  <div class="t1">钻孔编号</div>
                  <div class="t2">{{ state.zkYichangObj.drillCode }}</div>
                </div>
                <div>
                  <div class="t1">钻孔位置</div>
                  <div class="t2">工作面回风巷15米</div>
                </div>
              </div>
            </div>
            <div class="zcbt" style="margin-top: 10px">
              <div class="searchs">
                <el-form :model="state.zkYichangSearchData" class="forms">
                  <el-row :gutter="20">
                    <el-col :span="6">
                      <el-form-item label="异常类型">
                        <el-select
                          v-model="state.zkYichangSearchData.errorTypeId"
                          style="width: 100%"
                          size="small"
                          placeholder="请选择"
                        >
                          <el-option
                            v-for="(item, index) in state.ycTypeSelectData"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="施工日期">
                        <el-date-picker
                          v-model="state.zkYichangSearchData.time"
                          type="daterange"
                          range-separator="-"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          size="small"
                          :value-format="'YYYY-MM-DD'"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label=" ">
                        <el-button
                          @click="zcYichangqueryFn"
                          size="small"
                          type="primary"
                          >查询</el-button
                        >
                        <el-button @click="zcYichangresetFn" size="small"
                          >重置</el-button
                        >
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
              <div class="liebiao">
                <div class="liebiaoBottom">
                  <vxe-table
                    height="340"
                    :data="state.zkYichangTableData"
                    border="inner"
                  >
                    <vxe-column type="checkbox" :width="55"></vxe-column>
                    <vxe-column
                      type="seq"
                      :width="55"
                      title="序号"
                    ></vxe-column>
                    <vxe-column
                      v-for="(item, index) in state.zkYichangTableheads"
                      :field="item.field"
                      :title="item.title"
                      :params="{ name: item.name }"
                      :width="item.width ? item.width : ''"
                      :key="index"
                    >
                    </vxe-column>
                    <vxe-column title="操作">
                      <template #default="{ row }">
                        <el-button type="primary" link size="small"
                          >钻孔视频</el-button
                        >
                      </template>
                    </vxe-column>
                  </vxe-table>
                  <div
                    v-if="state.zkYichangpageconfig.total > 0"
                    class="w100 pagevxe"
                    style="height: 35px"
                  >
                    <el-pagination
                      class="globalFontSize"
                      :class="{ pages: settingsStore.isDark }"
                      v-model:current-page="
                        state.zkYichangpageconfig.currentPage
                      "
                      v-model:page-size="state.zkYichangpageconfig.pageSize"
                      :page-sizes="[10, 20, 30, 40]"
                      background
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="state.zkYichangpageconfig.total"
                      @size-change="zkYichangSizePage"
                      @current-change="zkYichangCurrentPage"
                      style="position: absolute; bottom: 16px; right: 16px"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template #footer>
          <el-button @click="cancelZcYichangModal">取消</el-button>
          <el-button type="primary" @click="submitZcYichangForm">
            确定
          </el-button>
        </template>
      </vxe-modal>
    </teleport>
    <!-- 钻孔记录弹框 -->
    <teleport to="body">
      <vxe-modal
        esc-closable
        destroy-on-close
        :lock-view="false"
        :width="1200"
        :height="auto"
        v-model="state.zkjiluModal"
        resize
        :mask="true"
        showFooter
      >
        <template #title>
          <div class="w100 h100 fsc mask_title">
            {{ state.modalZkjiluTitle }}
          </div>
        </template>
        <template #default>
          <div class="form_box">
            <div class="zctp fbc">
              <div class="zcptall">
                <div>
                  <div class="t1">工作面</div>
                  <div class="t2">
                    {{ substr(state.zcDetailData?.workingFaceNames) }}
                  </div>
                </div>
                <div>
                  <div class="t1">钻场</div>
                  <div class="t2">{{ state.zcDetailData.siteNameShow }}</div>
                </div>
                <div>
                  <div class="t1">钻孔编号</div>
                  <div class="t2">{{ state.shigongdrillObj.drillCode }}</div>
                </div>
                <div>
                  <div class="t1">抽采方式</div>
                  <div class="t2">
                    {{ state.shigongdrillObj.drainageMethodName }}
                  </div>
                </div>
                <div>
                  <div class="t1">钻机型号</div>
                  <div class="t2">
                    {{ state.shigongdrillObj.drillDeviceModelName }}
                  </div>
                </div>
                <div>
                  <div class="t1">钻场状态</div>
                  <div class="t2">{{ state.zcDetailData.statusName }}</div>
                </div>
                <div>
                  <div class="t1">开始钻孔时间</div>
                  <div class="t2">
                    {{ state.shigongdrillObj.drillStartTime }}
                  </div>
                </div>
                <div>
                  <div class="t1">结束钻孔时间</div>
                  <div class="t2">{{ state.shigongdrillObj.drillEndTime }}</div>
                </div>
                <div>
                  <div class="t1">累计进尺</div>
                  <div class="t2">{{ state.zcDetailData.totalFootage }}</div>
                </div>
                <div>
                  <div class="t1">
                    钻孔坐标
                    <span
                      ><el-button type="primary" link @click="handleGisView"
                        >GIS查看</el-button
                      ></span
                    >
                  </div>
                  <div class="t2">
                    {{ state.shigongdrillObj.position.join(",") }}
                  </div>
                </div>
                <div>
                  <div class="t1">每班平均进尺</div>
                  <div class="t2">
                    {{ state.zcDetailData.drillAverageRealDepth }}
                  </div>
                </div>
                <div>
                  <div class="t1">异常次数</div>
                  <div class="t2">{{ state.shigongdrillObj.errorCount }}</div>
                </div>
              </div>
            </div>
            <div class="zctp fbc" style="margin-top: 10px">
              <div class="zcptall2">
                <div class="zcptallTitie fbc t3">
                  <span class="w80">参数</span>
                  <span class="w80">钻孔位置</span>
                  <span class="w80">开孔高度(m)</span>
                  <span class="w80">钻孔方位角(°)</span>
                  <span class="w80">钻孔倾角(°)</span>
                  <span class="w80">钻孔间距(m)</span>
                  <span class="w80">钻孔孔径(mm)</span>
                  <span class="w80">钻孔深度(m)</span>
                </div>
                <div class="zcptallTitie fbc">
                  <span class="w80">设计参数</span>
                  <span class="w80">{{
                    state.shigongdrillObj.designDrillLocation
                  }}</span>
                  <span class="w80">{{
                    state.shigongdrillObj.designDrillHeight
                  }}</span>
                  <span class="w80">{{
                    state.shigongdrillObj.designDrillAzimuthAngle
                  }}</span>
                  <span class="w80">{{
                    state.shigongdrillObj.designDrillElevationAngle
                  }}</span>
                  <span class="w80">{{
                    state.shigongdrillObj.designDrillInterval
                  }}</span>
                  <span class="w80">{{
                    state.shigongdrillObj.designDrillAperture
                  }}</span>
                  <span class="w80">{{
                    state.shigongdrillObj.designDrillDepth
                  }}</span>
                </div>
                <div class="zcptallTitie fbc">
                  <span class="w80">实际参数</span>
                  <span class="w80">{{
                    state.shigongdrillObj.realDrillLocation
                  }}</span>
                  <span class="w80">{{
                    state.shigongdrillObj.realDrillHeight
                  }}</span>
                  <span class="w80">{{
                    state.shigongdrillObj.realDrillAzimuthAngle
                  }}</span>
                  <span class="w80">{{
                    state.shigongdrillObj.realDrillElevationAngle
                  }}</span>
                  <span class="w80">{{
                    state.shigongdrillObj.realDrillInterval
                  }}</span>
                  <span class="w80">{{
                    state.shigongdrillObj.realDrillAperture
                  }}</span>
                  <span class="w80">{{
                    state.shigongdrillObj.realDrillDepth
                  }}</span>
                </div>
              </div>
            </div>
            <div class="zcbt" style="margin-top: 10px">
              <div class="searchs">
                <el-form :model="state.zkjiluSearchData" class="forms">
                  <el-row :gutter="20">
                    <el-col :span="5">
                      <el-form-item label="施工日期">
                        <el-date-picker
                          v-model="state.zkjiluSearchData.time"
                          type="daterange"
                          range-separator="-"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          size="small"
                          :value-format="'YYYY-MM-DD'"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="5">
                      <el-form-item label="班次">
                        <el-select
                          v-model="state.zkjiluSearchData.classId"
                          style="width: 100%"
                          size="small"
                          placeholder="请选择"
                        >
                          <el-option
                            v-for="(item, index) in state.banciSelectData"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="班组长">
                        <el-input
                          v-model="state.zkjiluSearchData.classLeaderName"
                          size="small"
                          placeholder="请输入"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="5" style="margin: 0 0 0 15px">
                      <el-form-item label="异常类型">
                        <el-select
                          v-model="state.zkjiluSearchData.errorTypeId"
                          style="width: 100%"
                          size="small"
                          placeholder="请选择"
                        >
                          <el-option
                            v-for="(item, index) in state.ycTypeSelectData"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="3">
                      <el-form-item label=" ">
                        <el-button
                          @click="zkjiluqueryFn"
                          size="small"
                          type="primary"
                          >查询</el-button
                        >
                        <el-button @click="zkjiluresetFn" size="small"
                          >重置</el-button
                        >
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
              <div class="liebiao">
                <div class="liebiaoBottom">
                  <vxe-table
                    height="340"
                    :data="state.zkjiluTableData"
                    border="inner"
                  >
                    <vxe-column type="checkbox" :width="55"></vxe-column>
                    <vxe-column
                      type="seq"
                      :width="55"
                      title="序号"
                    ></vxe-column>
                    <vxe-column
                      v-for="(item, index) in state.zkjiluTableheads"
                      :field="item.field"
                      :title="item.title"
                      :params="{ name: item.name }"
                      :width="item.width ? item.width : ''"
                      :key="index"
                    >
                      <!-- 是否终孔 -->
                      <template
                        #default="{ row }"
                        v-if="item.field === 'finalDrill'"
                      >
                        <div>
                          <span>{{
                            row[item.field] === true ? "是" : "否"
                          }}</span>
                        </div>
                      </template>
                    </vxe-column>
                    <vxe-column title="操作">
                      <template #default="{ row }">
                        <el-button type="primary" link size="small"
                          >钻孔视频</el-button
                        >
                      </template>
                    </vxe-column>
                  </vxe-table>
                  <div
                    v-if="state.zkjilupageconfig.total > 0"
                    class="w100 pagevxe"
                    style="height: 35px"
                  >
                    <el-pagination
                      class="globalFontSize"
                      :class="{ pages: settingsStore.isDark }"
                      v-model:current-page="state.zkjilupageconfig.currentPage"
                      v-model:page-size="state.zkjilupageconfig.pageSize"
                      :page-sizes="[10, 20, 30, 40]"
                      background
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="state.zkjilupageconfig.total"
                      @size-change="zkjiluSizePage"
                      @current-change="zkjiluCurrentPage"
                      style="position: absolute; bottom: 16px; right: 16px"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template #footer>
          <el-button @click="cancelZkjiluModal">取消</el-button>
          <el-button type="primary" @click="submitZkjiluForm"> 确定 </el-button>
        </template>
      </vxe-modal>
    </teleport>
    <!-- 施工记录弹框 -->
    <teleport to="body">
      <vxe-modal
        esc-closable
        destroy-on-close
        :lock-view="false"
        :width="1200"
        :height="auto"
        v-model="state.shigongModal"
        resize
        :mask="true"
        showFooter
      >
        <template #title>
          <div class="w100 h100 fsc mask_title">
            {{ state.modalShigongTitle }}
          </div>
        </template>
        <template #default>
          <div class="form_box">
            <div class="zcbt">
              <div class="searchs">
                <el-form
                  :model="state.shigongSearchData"
                  class="forms"
                  label-width="70px"
                >
                  <el-row :gutter="10">
                    <el-col :span="6">
                      <el-form-item label="施工日期">
                        <el-date-picker
                          v-model="state.shigongSearchData.time"
                          type="daterange"
                          range-separator="-"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          size="small"
                          :value-format="'YYYY-MM-DD'"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="5">
                      <el-form-item label="班次">
                        <el-select
                          v-model="state.shigongSearchData.classId"
                          style="width: 100%"
                          size="small"
                          placeholder="请选择"
                        >
                          <el-option
                            v-for="(item, index) in state.banciSelectData"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="班组长">
                        <el-input
                          v-model="state.shigongSearchData.classLeaderName"
                          placeholder="请输入"
                          size="small"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="终孔">
                        <el-select
                          v-model="state.shigongSearchData.finalDrill"
                          style="width: 100%"
                          size="small"
                          placeholder="请选择"
                        >
                          <el-option label="是" :value="1"></el-option>
                          <el-option label="否" :value="0"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="异常类型">
                        <el-select
                          v-model="state.shigongSearchData.errorTypeId"
                          style="width: 100%"
                          size="small"
                          placeholder="请选择"
                        >
                          <el-option
                            v-for="(item, index) in state.ycTypeSelectData"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label=" ">
                        <el-button
                          @click="shigongqueryFn"
                          size="small"
                          type="primary"
                          >查询</el-button
                        >
                        <el-button @click="shigongresetFn" size="small"
                          >重置</el-button
                        >
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
              <div class="liebiao">
                <div class="liebiaoBottom">
                  <vxe-table
                    height="340"
                    :data="state.shigongTableData"
                    border="inner"
                  >
                    <vxe-column type="checkbox" :width="55"></vxe-column>
                    <vxe-column
                      type="seq"
                      :width="55"
                      title="序号"
                    ></vxe-column>
                    <vxe-column
                      v-for="(item, index) in state.shigongTableheads"
                      :field="item.field"
                      :title="item.title"
                      :params="{ name: item.name }"
                      :width="item.width ? item.width : ''"
                      :key="index"
                    >
                    <!-- 是否终孔 -->
                      <template
                        #default="{ row }"
                        v-if="item.field === 'finalDrill'"
                      >
                        <div>
                          <span>{{
                            row[item.field] === true ? "是" : "否"
                          }}</span>
                        </div>
                      </template>
                    </vxe-column>
                    <vxe-column title="操作">
                      <template #default="{ row }">
                        <el-button type="primary" link size="small"
                          >钻孔视频</el-button
                        >
                      </template>
                    </vxe-column>
                  </vxe-table>
                  <div
                    v-if="state.shigongpageconfig.total > 0"
                    class="w100 pagevxe"
                    style="height: 35px"
                  >
                    <el-pagination
                      class="globalFontSize"
                      :class="{ pages: settingsStore.isDark }"
                      v-model:current-page="state.shigongpageconfig.currentPage"
                      v-model:page-size="state.shigongpageconfig.pageSize"
                      :page-sizes="[10, 20, 30, 40]"
                      background
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="state.shigongpageconfig.total"
                      @size-change="shigongSizePage"
                      @current-change="shigongCurrentPage"
                      style="position: absolute; bottom: 16px; right: 16px"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template #footer>
          <el-button @click="cancelShigongModal">取消</el-button>
          <el-button type="primary" @click="submitShigongForm">
            确定
          </el-button>
        </template>
      </vxe-modal>
    </teleport>
    <el-dialog title="预览" v-model="state.dialogVisiblepictureCardPreview">
      <img :src="state.dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </div>
</template>
<script setup>
import { computed, nextTick, onMounted, reactive } from "vue";
import { VxeUI } from "vxe-table";
import Sortable from "sortablejs";
import querybox from "@/components/commonCom/querybox";
import confirmCom from "@/components/commonCom/confirmCom";
import _, { get } from "lodash";
import { table_headers } from "@/components/commonCom/table_headersChoucai";
import dayjs from "dayjs";
import isoWeek from "dayjs/plugin/isoWeek";
dayjs.extend(isoWeek);
import axios from "@/utils/request";
import { fileupload } from "@/api/config";
import { ElMessage, ElMessageBox } from "element-plus";
import useSettingsStore from "@/store/modules/settings";
import top1 from "@/assets/images/wasi/抽采达标率.png";
import top2 from "@/assets/images/wasi/瓦斯总储量.png";
import top3 from "@/assets/images/wasi/抽采达标量.png";
import top4 from "@/assets/images/wasi/抽采累计量.png";
import top5 from "@/assets/images/wasi/残余瓦斯含量.png";
import top6 from "@/assets/images/wasi/可解析瓦斯量.png";
import top7 from "@/assets/images/wasi/残余瓦斯压力.png";
const settingsStore = useSettingsStore();
const isDark = computed(() => settingsStore.isDark);
const { proxy } = getCurrentInstance();
let previewHttps = import.meta.env.VITE_APP_HTTP;
let state = reactive({
  erweiGIS: "http://172.16.49.131:8101/",
  leftActiveIndex: 0,
  leftTreeID: "",
  leftTreeData: [
    // { name: "201工作面" },
    // { name: "202工作面" },
    // { name: "203工作面" },
    // { name: "204工作面" },
    // { name: "205工作面" },
    // { name: "206工作面" },
    // { name: "207工作面" },
    // { name: "208工作面" },
    // { name: "209工作面" },
    // { name: "210工作面" },
  ],
  queryboxTopData: [
    { imgUrl: top1, num: 127, unit: "%", txt: "抽采达标率" },
    { imgUrl: top2, num: 1837.76, unit: "万m³", txt: "瓦斯总储量" },
    { imgUrl: top3, num: 573.78, unit: "万m³", txt: "抽采达标量" },
    { imgUrl: top4, num: 30.95, unit: "万m³", txt: "抽采累计量" },
    { imgUrl: top5, num: 5.11, unit: "m³/t", txt: "残余瓦斯含量" },
    { imgUrl: top6, num: 1.21, unit: "m³/t", txt: "可解析瓦斯量" },
    { imgUrl: top7, num: 0.7, unit: "m³/t", txt: "残余瓦斯压力" },
  ],
  btnColorFlag: false,
  btnColorFlag2: false,
  taleBoxTopData: [
    // { txt: "全部", num: 120 },
    // { txt: "设计中", num: 0 },
    // { txt: "审批中", num: 0 },
    // { txt: "待施工", num: 0 },
    // { txt: "施工中", num: 0 },
    // { txt: "施工完成", num: 0 },
    // { txt: "待验收", num: 0 },
    // { txt: "验收合格", num: 0 },
    // { txt: "抽采中", num: 0 },
    // { txt: "抽采完成", num: 0 },
    // { txt: "关闭", num: 0 },
    // { txt: "废弃", num: 0 },
  ],
  topItemIndex: 0,
  topStatusId: "",
  zuanchangName: "",
  containerData: [
    // {
    //   txt1: "设计中",
    //   txt2: "201-1钻场",
    //   txt3: "201工作面回风巷道",
    //   data: [
    //     { name1: "总设计孔", num: 10, unit: "" },
    //     { name1: "总设计进尺", num: 100, unit: "m" },
    //     { name1: "平均设计孔深", num: "2025-10-10", unit: "" },
    //     { name1: "总设计", num: 10, unit: "" },
    //   ],
    // },
  ],
  gongzuomianSelectData: [], //工作面下拉框
  camearSelectData: [
    { label: "1", value: 1 },
    { label: "2", value: 2 },
    { label: "3", value: 3 },
  ], //摄像头下拉框
  zcSelectData: [], //钻场下拉框
  ccMethodData: [], //抽采方式下拉框
  zjTypeData: [], //钻机型号下拉框
  ycTypeSelectData: [], //异常类型下拉框
  banciSelectData: [], //班次下拉框
  zcDetailData: {},
  //抽采工作面
  addChoucaiModal: false,
  modalChoucaiTitle: "新增抽采工作面",
  formChoucaiData: {},
  formChoucaiRules: {
    name: [{ required: true, message: "请输入名称", trigger: "blur" }],
    position: [
      { required: true, message: "请选择工作面范围", trigger: "change" },
    ],
  },
  fileList: [],
  fileList2: [],
  dialogVisiblepictureCardPreview: false,
  dialogImageUrl: "",
  GISModal: false,
  //钻场
  addZuanchangModal: false,
  modalZuanchangTitle: "新增钻场",
  formZuanchangData: {},
  formZuanchangRules: {
    workingFaceIds: [
      { required: true, message: "请选择工作面", trigger: "change" },
    ],
    placeName: [{ required: true, message: "请输入地点名称", trigger: "blur" }],
    siteName: [{ required: true, message: "请输入钻场名称", trigger: "blur" }],
    siteCode: [{ required: true, message: "请输入钻场编号", trigger: "blur" }],
    position: [
      { required: true, message: "请选择钻场范围", trigger: "change" },
    ],
    cameraIds: [
      { required: true, message: "请选择钻场摄像头", trigger: "change" },
    ],
  },
  //钻场详情
  zuanchangDetailsModal: false,
  zcSearchData: {}, //钻场详情搜索数据
  zcxqTableData: [], //钻场详情表格数据
  zcxqTableheads: computed(() => table_headers.DrainageDrill),
  zcxqpageconfig: {
    currentPage: 1,
    pageSize: 10,
    total: 0,
  },
  //钻孔
  addZuankongModal: false,
  modalZuankongTitle: "新增钻孔",
  formZuankongData: {},
  formZuankongRules: {
    workingFaceId: [
      { required: true, message: "请选择工作面", trigger: "change" },
    ],
    drillSiteId: [{ required: true, message: "请选择钻场", trigger: "change" }],
    drillCode: [{ required: true, message: "请输入钻孔编号", trigger: "blur" }],
    drainageMethodId: [
      { required: true, message: "请选择抽采方式", trigger: "change" },
    ],
    drillDeviceModelName: [
      { required: true, message: "请选择钻机型号", trigger: "change" },
    ],
    designDrillLocation: [
      { required: true, message: "请输入钻孔位置", trigger: "blur" },
    ],
    position: [
      { required: true, message: "请选择钻孔坐标", trigger: "change" },
    ],
    designDrillHeight: [
      { required: true, message: "请输入开孔高度", trigger: "blur" },
    ],
    designDrillAzimuthAngle: [
      { required: true, message: "请输入钻孔方位角", trigger: "blur" },
    ],
    designDrillElevationAngle: [
      { required: true, message: "请输入钻孔倾角", trigger: "blur" },
    ],
    designDrillInterval: [
      { required: true, message: "请输入钻孔间距", trigger: "blur" },
    ],
    designDrillAperture: [
      { required: true, message: "请输入钻孔孔径", trigger: "blur" },
    ],
    designDrillDepth: [
      { required: true, message: "请输入钻孔深度", trigger: "blur" },
    ],
    cameraId: [{ required: true, message: "请选择摄像头", trigger: "change" }],
  },
  //钻孔异常
  zkyichangModal: false,
  modalZkyichangTitle: "钻孔异常",
  zkYichangObj: {},
  zkYichangSearchData: {}, //钻孔异常搜索数据
  zkYichangTableData: [], //钻孔异常表格数据
  zkYichangTableheads: computed(() => table_headers.DrainageDrillError),
  zkYichangpageconfig: {
    currentPage: 1,
    pageSize: 10,
    total: 0,
  },
  //钻孔记录
  zkjiluModal: false,
  modalZkjiluTitle: "钻孔记录",
  zkjiluSearchData: {}, //钻孔记录搜索数据
  zkjiluTableData: [],
  zkjiluTableheads: computed(() => table_headers.DrainageDrillRecord),
  zkjilupageconfig: {
    currentPage: 1,
    pageSize: 10,
    total: 0,
  },
  //施工记录
  shigongModal: false,
  modalShigongTitle: "施工记录",
  shigongdrillObj: {},
  shigongSearchData: {}, //施工记录搜索数据
  shigongTableData: [],
  shigongTableheads: computed(() => table_headers.DrainageConstructionRecord),
  shigongpageconfig: {
    currentPage: 1,
    pageSize: 10,
    total: 0,
  },
});
const substr = (str) => {
  if (str?.length > 6) {
    return str.substring(0, 5) + "...";
  } else {
    return str;
  }
};
const treeClickFn = (item, index) => {
  state.leftTreeID = item.id;
  state.leftActiveIndex = index;
  getHeaderList();
  getZuanchangList(state.topStatusId);
};
//新增抽采工作面
const addChoucaiBtn = (type) => {
  if (type != 1) {
    state.btnColorFlag = true;
  }
  state.modalChoucaiTitle = "新增抽采工作面";
  state.addChoucaiModal = true;
  state.formChoucaiData = {};
  state.fileList = [];
  state.fileList2 = [];
};
const cancelChoucaiModal = () => {
  state.addChoucaiModal = false;
  state.formChoucaiData = {};
  state.fileList = [];
  state.fileList2 = [];
};
const submitChoucaiForm = () => {
  console.log("确定新增抽采工作面");
  proxy.$refs.formChoucaiRef.validate((valid) => {
    if (valid) {
      if (state.modalChoucaiTitle == "新增抽采工作面") {
        axios
          .post("/drainage/working-face/insert", state.formChoucaiData)
          .then((res) => {
            cancelChoucaiModal();
            proxy.$message.success("提交成功");
            getTreeList();
          });
      } else {
        axios
          .post("/drainage/working-face/update", state.formChoucaiData)
          .then((res) => {
            cancelChoucaiModal();
            proxy.$message.success("提交成功");
            getTreeList();
          });
      }
    }
  });
};
const editTreeFn = (row) => {
  console.log("编辑", row);
  state.modalChoucaiTitle = "编辑抽采工作面";
  state.addChoucaiModal = true;
  state.formChoucaiData = row;
  state.fileList = [{ name: row.designDocFilename, url: row.designDocUrl }];
  state.fileList2 = [
    { name: row.safetyMeasureDocFilename, url: row.safetyMeasureDocUrl },
  ];
};
const deleteTreeFn = (id) => {
  console.log("删除", id);
  ElMessageBox.confirm("是否确认删除?", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    axios.post(`/drainage/working-face/delete/`, [id]).then((res) => {
      proxy.$message.success("删除成功");
      getTreeList();
    });
  });
};
//新增GIS选择
const handleGisSelect = () => {
  state.GISModal = true;
  messageTimer = setInterval(() => {
    postPageMessage();
  }, 1000);
};
const cancelGISModal = () => {
  state.GISModal = false;
};
const submitGISForm = () => {
  state.GISModal = false;
  console.log(state.formChoucaiData.position, "state.formChoucaiData.position");
};
//新增钻场
const topclickFn = (item, index) => {
  state.topItemIndex = index;
  state.topStatusId = item.statusId;
  getZuanchangList(item.statusId);
};
const addZuanchangBtn = () => {
  state.btnColorFlag2 = true;
  state.modalZuanchangTitle = "新增钻场";
  state.addZuanchangModal = true;
  state.formZuanchangData = {};
};
const cancelZuanchangModal = () => {
  state.addZuanchangModal = false;
  state.formZuanchangData = {};
};
const submitZuanchangForm = () => {
  console.log("确定新增钻场");
  proxy.$refs.formZuanchangRef.validate((valid) => {
    if (valid) {
      if (state.modalZuanchangTitle == "新增钻场") {
        axios
          .post("/drainage/drill-site/insert", state.formZuanchangData)
          .then((res) => {
            cancelZuanchangModal();
            proxy.$message.success("提交成功");
            getZuanchangList(state.topStatusId);
          });
      } else {
        axios
          .post("/drainage/drill-site/update", state.formZuanchangData)
          .then((res) => {
            cancelZuanchangModal();
            proxy.$message.success("提交成功");
            getZuanchangList(state.topStatusId);
          });
      }
    }
  });
};
const editZuanchangFn = (row) => {
  console.log("编辑", row);
  state.modalZuanchangTitle = "编辑钻场";
  state.addZuanchangModal = true;
  state.formZuanchangData = row;
};
const deleteZuanchangFn = (id) => {
  console.log("删除", id);
  ElMessageBox.confirm("是否确认删除?", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    axios.post(`/drainage/drill-site/delete/`, [id]).then((res) => {
      proxy.$message.success("删除成功");
      getZuanchangList(state.topStatusId);
    });
  });
};
//钻场详情
const zuanchangDetailFn = (id) => {
  axios.post(`/drainage/drill-site/${id}`).then((res) => {
    if (res.code == 200) {
      state.zcDetailData = res.data;
      state.zuanchangDetailsModal = true;
      getzkTableData(id);
    }
  });
};
const cancelZcDetailModal = () => {
  state.zuanchangDetailsModal = false;
};
const submitZcDetailForm = () => {
  state.zuanchangDetailsModal = false;
};
//新增钻孔
const addZuankongBtn = (item) => {
  console.log("新增钻孔", item);
  state.modalZuankongTitle = "新增钻孔";
  state.formZuankongData = {};
  state.formZuankongData.workingFaceId = item.workingFaceIds;
  state.formZuankongData.drillSiteId = item.id;
  state.addZuankongModal = true;
};
const cancelZuankongModal = () => {
  state.addZuankongModal = false;
  state.formZuankongData = {};
};
const submitZuankongForm = () => {
  console.log("确定新增钻孔");
  proxy.$refs.formZuankongRef.validate((valid) => {
    if (valid) {
      if (state.modalZuankongTitle == "新增钻孔") {
        axios
          .post("/drainage/drill/insert", state.formZuankongData)
          .then((res) => {
            if (res.code == 200) {
              cancelZuankongModal();
              proxy.$message.success("提交成功");
              getzkTableData();
            }
          });
      } else {
        axios
          .post("/drainage/drill/update", state.formZuankongData)
          .then((res) => {
            if (res.code == 200) {
              cancelZuankongModal();
              proxy.$message.success("提交成功");
              getzkTableData();
            }
          });
      }
    }
  });
};
const editZuankong = (row) => {
  console.log("编辑", row);
  state.formZuankongData = row;
  state.modalZuankongTitle = "编辑钻孔";
  state.addZuankongModal = true;
};
const deleteZuankong = (id) => {
  console.log("删除", id);
  ElMessageBox.confirm("是否确认删除?", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    axios.post(`/drainage/drill/delete/`, [id]).then((res) => {
      proxy.$message.success("删除成功");
      getzkTableData();
    });
  });
};
//钻孔异常
const zkyichangBtn = (item) => {
  console.log("钻孔异常", item);
  state.zkYichangObj = item;
  state.zkyichangModal = true;
  getZkYichangTableData();
};
const cancelZcYichangModal = () => {
  state.zkyichangModal = false;
};
const submitZcYichangForm = () => {
  console.log("确定钻孔异常");
  state.zkyichangModal = false;
};
//钻孔记录
const zkjiluBtn = (id) => {
  // console.log("state.zcDetailData", state.zcDetailData);
  getZkjiluTableData(id);
};
const cancelZkjiluModal = () => {
  state.zkjiluModal = false;
};
const submitZkjiluForm = () => {
  console.log("确定钻孔记录");
  state.zkjiluModal = false;
};
//施工记录
const shigongBtn = (id) => {
  state.shigongModal = true;
  getShigongTableData(id);
};
const cancelShigongModal = () => {
  state.shigongModal = false;
};
const submitShigongForm = () => {
  state.shigongModal = false;
};

//搜索----------------------------------
//钻场名称查询
const zcNamequeryFn = () => {
  getZuanchangList(state.topStatusId);
};
//钻场名称重置
const zcNameresetFn = () => {
  state.zuanchangName = "";
  getZuanchangList(state.topStatusId);
};
//钻场详情查询
const zcDetailqueryFn = () => {
  getzkTableData();
};
//钻场详情重置
const zcDetailresetFn = () => {
  state.zcSearchData = {};
  getzkTableData();
};
//钻孔异常查询
const zcYichangqueryFn = () => {
  getZkYichangTableData();
};
//钻孔异常重置
const zcYichangresetFn = () => {
  state.zkYichangSearchData = {};
  getZkYichangTableData();
};
//钻孔记录查询
const zkjiluqueryFn = () => {
  getZkjiluTableData();
};
//钻孔记录重置
const zkjiluresetFn = () => {
  state.zkjiluSearchData = {};
  getZkjiluTableData();
};
//施工记录查询
const shigongqueryFn = () => {
  getShigongTableData();
};
//施工记录重置
const shigongresetFn = () => {
  state.shigongSearchData = {};
  getShigongTableData();
};
//分页----------------------------------
//钻孔详情分页
const zcxqCurrentPage = (currentPage) => {
  state.zcxqpageconfig.currentPage = currentPage;
  getzkTableData();
};
const zcxqSizePage = (pageSize) => {
  state.zcxqpageconfig.pageSize = pageSize;
  getzkTableData();
};
//钻孔异常分页
const zkYichangCurrentPage = (currentPage) => {
  state.zkYichangpageconfig.currentPage = currentPage;
  getZkYichangTableData();
};
const zkYichangSizePage = (pageSize) => {
  state.zkYichangpageconfig.pageSize = pageSize;
  getZkYichangTableData();
};
//钻孔记录分页
const zkjiluCurrentPage = (currentPage) => {
  state.zkjilupageconfig.currentPage = currentPage;
  getZkjiluTableData();
};
const zkjiluSizePage = (pageSize) => {
  state.zkjilupageconfig.pageSize = pageSize;
  getZkjiluTableData();
};
//施工记录分页
const shigongCurrentPage = (currentPage) => {
  state.shigongpageconfig.currentPage = currentPage;
  getShigongTableData();
};
const shigongSizePage = (pageSize) => {
  state.shigongpageconfig.pageSize = pageSize;
  getShigongTableData();
};

//上传----------------------------------
const upload = ref(null);
const upload2 = ref(null);
const fileType = ["jpg", "png", "gif", "jpg", "jpeg"]; // 允许的文件类型
const beforeUpload = (file) => {
  //上传前的钩子
  if (file.type != "" || file.type != null || file.type != undefined) {
    //截取文件的后缀，判断文件类型
    const FileExt = file.name.replace(/.+\./, "").toLowerCase();
    // 计算文件的大小
    const isLt5M = file.size / 1024 < 10 * 1024 * 1024; //这里做文件大小限制
    //如果大于10M
    if (!isLt5M) {
      proxy.$modal.msgWarning("上传文件大小超过限制!");
      return false;
    }
    //如果文件类型不在允许上传的范围内
    if (fileType.includes(FileExt)) {
      return true;
    } else {
      proxy.$modal.msgWarning("上传文件格式不正确!");
      return false;
    }
  }
};
const uploadHttpRequestAdd = (data) => {
  upload.value.clearFiles();
  const formData = new FormData();
  formData.append("file", data.file);
  fileupload(formData).then((res) => {
    state.formChoucaiData.designDocUrl = previewHttps + res.fileName;
    state.formChoucaiData.designDocFilename = res.originalFilename;
    state.fileList.push({
      name: res.originalFilename,
      url: state.formChoucaiData.designDocUrl,
    });
    proxy.$modal.msgSuccess(res.msg);
  });
};
const beforeUpload2 = (file) => {
  //上传前的钩子
  if (file.type != "" || file.type != null || file.type != undefined) {
    //截取文件的后缀，判断文件类型
    const FileExt = file.name.replace(/.+\./, "").toLowerCase();
    // 计算文件的大小
    const isLt5M = file.size / 1024 < 10 * 1024 * 1024; //这里做文件大小限制
    //如果大于10M
    if (!isLt5M) {
      proxy.$modal.msgWarning("上传文件大小超过限制!");
      return false;
    }
    //如果文件类型不在允许上传的范围内
    if (fileType.includes(FileExt)) {
      return true;
    } else {
      proxy.$modal.msgWarning("上传文件格式不正确!");
      return false;
    }
  }
};
const uploadHttpRequestAdd2 = (data) => {
  upload2.value.clearFiles();
  const formData = new FormData();
  formData.append("file", data.file);
  fileupload(formData).then((res) => {
    state.formChoucaiData.safetyMeasureDocUrl = previewHttps + res.fileName;
    state.formChoucaiData.safetyMeasureDocFilename = res.originalFilename;
    state.fileList2.push({
      name: res.originalFilename,
      url: state.formChoucaiData.safetyMeasureDocUrl,
    });
    proxy.$modal.msgSuccess(res.msg);
  });
};
//图片预览
function handlePictureCardPreview(uploadFile) {
  state.dialogImageUrl = uploadFile.url;
  state.dialogVisiblepictureCardPreview = true;
}
//抽采工作面列表
function getTreeList() {
  axios.post("/drainage/working-face/list", {}).then((res) => {
    if (res.data.length > 0) {
      state.leftTreeData = res.data;
      state.leftTreeID = res.data?.[0].id;
      state.gongzuomianSelectData = [];
      res.data.forEach((item) => {
        state.gongzuomianSelectData.push({
          label: item.name,
          value: item.id,
        });
      });
    }
  });
}
//钻场头部
function getHeaderList() {
  axios.post("/drainage/drill-site/status-count", {
    workingFaceIds: state.leftTreeID ? state.leftTreeID : null,
  }).then((res) => {
    state.taleBoxTopData = res.data;
    //求和
    let sum = 0;
    res.data.forEach((item) => {
      sum += item.count;
    });
    console.log(sum, "sum");
    //头部插入
    state.taleBoxTopData.unshift({
      statusName: "全部",
      count: sum,
      statusId: "",
    });
  });
}
//钻场列表
function getZuanchangList(id) {
  axios
    .post("/drainage/drill-site/index-preview", {
      statusId: id ? id : "",
      siteName: state.zuanchangName ? state.zuanchangName : null,
      workingFaceIds: state.leftTreeID ? state.leftTreeID : null,
    })
    .then((res) => {
      if (res.code == 200) {
        state.containerData = res.data;
      }
    });
}
function getSelectData() {
  //钻场列表
  axios.post("/drainage/drill-site/list", {}).then((res) => {
    state.zcSelectData = res.data.map((item) => {
      return {
        label: item.siteNameShow,
        value: item.id,
      };
    });
  });
  axios
    .post("/gas-drainage/system/dict/data/type-batch", [
      "drainage_method", //抽采方式
      "drill_machine_type", //钻机型号
      "drill_error_type", //异常类型
      "mine_class", //班次
    ])
    .then((res) => {
      state.ccMethodData = res.data.drainage_method.map((item) => {
        //抽采方式
        return {
          label: item.dictLabel,
          value: Number(item.dictValue),
        };
      });
      state.zjTypeData = res.data.drill_machine_type.map((item) => {
        //钻机型号
        return {
          label: item.dictLabel,
          value: item.dictValue,
        };
      });
      state.ycTypeSelectData = res.data.drill_error_type.map((item) => {
        //异常类型
        return {
          label: item.dictLabel,
          value: item.dictValue,
        };
      });
      state.banciSelectData = res.data.mine_class.map((item) => {
        //班次
        return {
          label: item.dictLabel,
          value: item.dictValue,
        };
      });
    });
}
//table表格数据
//钻场详情-钻孔列表
function getzkTableData(id) {
  axios
    .post("/drainage/drill/page", {
      pageNum: state.zcxqpageconfig.currentPage,
      pageSize: state.zcxqpageconfig.pageSize,
      drillSiteId: state.zcDetailData.id,
      finalDrill: state.zcSearchData.finalDrill
        ? state.zcSearchData.finalDrill
        : null,
      drillStartTime: state.zcSearchData.time
        ? state.zcSearchData.time[0]
        : null,
      drillEndTime: state.zcSearchData.time ? state.zcSearchData.time[1] : null,
    })
    .then((res) => {
      state.zcxqTableData = res.data.list;
      state.zcxqpageconfig.total = res.data.total;
    });
}
//钻孔异常
function getZkYichangTableData() {
  axios
    .post("/drainage/drill-error/page", {
      drillId: state.zkYichangObj.id,
      pageNum: state.zkYichangpageconfig.currentPage,
      pageSize: state.zkYichangpageconfig.pageSize,
      errorTypeId: state.zkYichangSearchData.errorTypeId
        ? Number(state.zkYichangSearchData.errorTypeId)
        : null,
      constructionTimeStart: state.zkYichangSearchData.time
        ? state.zkYichangSearchData.time[0]
        : null,
      constructionTimeEnd: state.zkYichangSearchData.time
        ? state.zkYichangSearchData.time[1]
        : null,
    })
    .then((res) => {
      state.zkYichangTableData = res.data.list;
      state.zkYichangpageconfig.total = res.data.total;
    });
}
//钻孔记录
function getZkjiluTableData(id) {
  axios
    .post("/drainage/construction-record/record/page", {
      drillId: id,
      pageNum: state.zkjilupageconfig.currentPage,
      pageSize: state.zkjilupageconfig.pageSize,
      constructionTimeStart: state.zkjiluSearchData.time
        ? state.zkjiluSearchData.time[0]
        : null,
      constructionTimeEnd: state.zkjiluSearchData.time
        ? state.zkjiluSearchData.time[1]
        : null,
      classId: state.zkjiluSearchData.classId
        ? Number(state.zkjiluSearchData.classId)
        : null,
      classLeaderName: state.zkjiluSearchData.classLeaderName
        ? state.zkjiluSearchData.classLeaderName
        : null,
      errorTypeId: state.zkjiluSearchData.errorTypeId
        ? Number(state.zkjiluSearchData.errorTypeId)
        : null,
    })
    .then((res) => {
      state.shigongdrillObj = res.data.drill;
      state.zkjiluTableData = res.data.records.list;
      state.zkjilupageconfig.total = res.data.records.total;
      state.zkjiluModal = true;
    });
}
//施工记录
function getShigongTableData(id) {
  axios
    .post("/drainage/construction-record/page", {
      drillId: id,
      pageNum: state.shigongpageconfig.currentPage,
      pageSize: state.shigongpageconfig.pageSize,
      constructionTimeStart: state.shigongSearchData.time
        ? state.shigongSearchData.time[0]
        : null,
      constructionTimeEnd: state.shigongSearchData.time
        ? state.shigongSearchData.time[1]
        : null,
      classId: state.shigongSearchData.classId
        ? Number(state.shigongSearchData.classId)
        : null,
      classLeaderName: state.shigongSearchData.classLeaderName
        ? state.shigongSearchData.classLeaderName
        : null,
      finalDrill: state.shigongSearchData.finalDrill
        ? state.shigongSearchData.finalDrill
        : null,
      errorTypeId: state.shigongSearchData.errorTypeId
        ? Number(state.shigongSearchData.errorTypeId)
        : null,
    })
    .then((res) => {
      state.shigongTableData = res.data.list;
      state.shigongpageconfig.total = res.data.total;
      state.shigongModal = true;
    });
}
// 二维
let messageTimer2 = null;

const handleGisView = () => {
  console.log(state.shigongdrillObj.position, "state.shigongdrillObj");
  state.GISModal = true;
  messageTimer2 = setInterval(() => {
    postPageMessage2();
  }, 1000);
};
const postPageMessage2 = (val) => {
  let iFrame = document.getElementById("iframe_box");
  iFrame.contentWindow.postMessage(
    {
      type: "wasi",
      action: "huixian",
      x: state.shigongdrillObj.position[0],
      y: state.shigongdrillObj.position[1],
      //     x: 485952,
      // y: 5479039,
    },
    state.erweiGIS
  );
};
let messageTimer = null;
const postPageMessage = (val) => {
  let iFrame = document.getElementById("iframe_box");
  iFrame.contentWindow.postMessage(
    {
      type: "wasi",
      action: "xuandian",
    },
    state.erweiGIS
  );
};
onMounted(async() => {
  //二维
  window.addEventListener("message", function (event) {
    //二维
    console.log(event, "event.data");
    if (event.data.closeright == "Message received") {
      clearInterval(messageTimer);
      messageTimer = null; //清除引用
            clearInterval(messageTimer2);
      messageTimer2 = null; //清除引用
    }
    if (event.data.type == "backxy") {
      state.formChoucaiData.position = [
        Number(event.data.x),
        Number(event.data.y),
      ];
      state.formZuanchangData.position = [
        Number(event.data.x),
        Number(event.data.y),
      ];
      state.formZuankongData.position = [
        Number(event.data.x),
        Number(event.data.y),
      ];
      ElMessage.success("获取坐标成功");
    }
  });
 await getTreeList();
 await getZuanchangList(state.topStatusId);
 await getHeaderList();
  getSelectData();
});
</script>
<style lang="scss" scoped>
.pages {
  // 上下页按钮
  :deep(.btn-next),
  :deep(.btn-prev) {
    background: rgba(91, 109, 128, 0.08) !important;
  }
}
.pagestyle {
  width: 100%;
  height: calc(100% - 10px);
  display: flex;
  .leftBox {
    width: 200px;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12);
    padding: 8px 15px;
    border-radius: 8px;
    .leftBox-top {
      .top1 {
        font-size: 18px;
        font-weight: 700;
      }
      .top2 {
        cursor: pointer;
        width: 25px;
        height: 25px;
        line-height: 25px;
        font-size: 24px;
        text-align: center;
        border-radius: 50%;
        color: rgba(62, 70, 79, 0.8);
        background: rgba(62, 70, 79, 0.1);
      }
    }
    .leftBox-bottom {
      height: calc(100% - 40px);
      overflow-y: auto;
      .bottomItem {
        margin: 10px 0;
        padding: 10px 0px;
        //鼠标箭头样式
        cursor: pointer;
      }
      .treeActive {
        border-radius: 2px;
        color: rgba(68, 136, 255, 1);
        background: rgba(68, 136, 255, 0.08);
      }
    }
  }
  .rightBox {
    width: 100%;
    margin-left: 10px;
    .querybox {
      padding: 15px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.4);
      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12);
      margin-bottom: 10px;
      height: 120px;
      .querybox-top {
        .topTxt {
          font-weight: 700;
          font-size: 16px;
        }
        .topCenter {
          width: 310px;
          margin-left: 30px;
          .topcenter-1,
          .topcenter-2,
          .topcenter-3 {
            cursor: pointer;
            padding: 5px 8px;
            font-size: 14px;
            color: rgba(68, 136, 255, 1);
            display: flex;
            align-items: center;
            background: rgba(68, 136, 255, 0.08);
            img {
              margin-right: 5px;
            }
          }
        }
      }
      .querybox-bottom {
        margin-top: 10px;
        .btmItem {
          .btmItem-item {
            width: 184px;
            border-radius: 4px;
            padding: 5px 20px 5px 10px;
            background: linear-gradient(
              180deg,
              rgba(42, 132, 235, 0.1) 0%,
              rgba(42, 132, 235, 0) 100%
            );
            .num {
              color: rgba(68, 136, 255, 1);
              font-weight: 700;
              font-size: 18px;
            }
            .unit {
              margin-left: 4px;
              font-size: 12px;
            }
            .txt {
              font-size: 16px;
            }
          }
        }
      }
    }

    .tableBox {
      padding: 15px;
      height: calc(100% - 130px);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.4);
      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12);
      .tableBox-top {
        .tableBox-top-left {
          .nameInput {
            width: 300px;
            margin-right: 15px;
            .nameInputTxt {
              font-size: 14px;
              width: 90px;
            }
          }
        }
      }
      .tableBox-bottom {
        .taleBox-bottomTop {
          // width: 90%;
          display: flex;
          margin: 10px 0;
          background-color: #e0e4eb;
          .topItem {
            font-size: 14px;
            height: 32px;
            line-height: 32px;
            padding: 0 10px;
            cursor: pointer;
          }
          .topItemActive {
            background: rgba(68, 136, 255, 0.2);
            color: rgba(68, 136, 255, 1);
            border-radius: 2px;
            font-weight: 700;
          }
        }
        .itemBoxContainer {
          display: flex;
          gap: 10px;
          flex-wrap: wrap;
          align-content: flex-start; /* 这是关键！ */
          height: calc(100vh - 410px);
          overflow-y: auto;
          .container {
            width: 395px;
            height: 200px;
            border-radius: 4px;
            background: rgba(68, 136, 255, 0.08);
            padding: 12px;
            .zuanchangItem {
              .zuanchangItem-top {
                font-size: 14px;
                .rap {
                  border-radius: 4px;
                  padding: 4px 8px;
                }
                .txt1-1 {
                  background: rgba(170, 119, 238, 0.16);
                  color: rgba(170, 119, 238, 1);
                }
                .txt1-2 {
                  background: rgba(255, 153, 0, 0.16);
                  color: rgba(255, 153, 0, 1);
                }
                .txt1-3 {
                  background: rgba(255, 118, 87, 0.16);
                  color: rgba(255, 118, 87, 1);
                }
                .txt1-4 {
                  background: rgba(68, 136, 255, 0.16);
                  color: rgba(68, 136, 255, 1);
                }
                .txt1-5 {
                  background: rgba(67, 207, 124, 0.16);
                  color: rgba(67, 207, 124, 1);
                }
                .txt1-6 {
                  background: rgba(238, 102, 187, 0.16);
                  color: rgba(238, 102, 187, 1);
                }
                .txt1-7 {
                  background: rgba(130, 130, 130, 0.16);
                  color: rgba(130, 130, 130, 1);
                }
                .txt2 {
                  margin: 0 10px;
                  font-weight: 700;
                }
                // .txt3 {
                // }
              }
              .imgs {
                margin: 0 10px;
              }
            }
            .centerItem {
              margin-top: 10px;
              height: 136px;
              overflow-y: auto;
              border-radius: 4px;
              background: rgba(255, 255, 255, 0.6);
              padding: 12px 0px;
              display: grid;
              grid-template-columns: repeat(
                auto-fill,
                minmax(100px, 1fr)
              ); // 自动适应列数和宽度
              gap: 20px;
              align-content: flex-start;
              text-align: center;
              .nameTxt {
                color: rgba(62, 70, 79, 0.6);
                font-size: 14px;
                margin-bottom: 5px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
<!-- 钻场详情 -->
<style lang="scss" scoped>
.zctp {
  width: 100%;
  border-radius: 4px;
  padding: 10px;
  background: rgba(91, 109, 128, 0.04);
  .zcptall {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-content: flex-start;
  }
  .zcptall2 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-content: flex-start;
    .zcptallTitie {
      width: 100%;
      .w80 {
        width: 100px;
      }
    }
  }
  .zctp-lt {
    width: 45%;
  }
  .zctp-ct {
    width: 2px;
    height: 32px;
    opacity: 1;
    background: rgba(204, 204, 204, 1);
  }
  .zctp-rt {
    width: 45%;
  }
  .t1 {
    color: rgba(62, 70, 79, 0.6);
  }
  .t2 {
    color: rgba(62, 70, 79, 1);
  }
  .t3 {
    font-weight: 700;
  }
}
.zcct {
  margin: 15px 0;
}
.zcbt {
  .searchs {
    width: 100%;
    // height: 40px;
    border-radius: 4px;
    padding: 5px 10px 0;
    background: rgba(91, 109, 128, 0.04);
    .el-col {
      margin: 0px 5px 0;
      height: 36px;
    }
  }
  .liebiao {
    margin-top: 10px;
    // .liebiaoTop{

    // }
    .liebiaoBottom {
      margin-top: 10px;
    }
  }
}
</style>
